<template>  
  <div class="per">  
    <el-form :model="UserInfo" label-width="120px">  
      <el-form-item label="用户名">  
        <el-input v-model="UserInfo.username" />  
      </el-form-item>  
      <el-form-item label="头像">  
        <el-input v-model="UserInfo.image" placeholder="请输入头像URL" />  
      </el-form-item>  
      <el-form-item label="简介">  
        <el-input v-model="UserInfo.bio" placeholder="请输入简介" />  
      </el-form-item>  
      <el-form-item label="邮箱">  
        <el-input v-model="UserInfo.email" />  
      </el-form-item>  
      <el-form-item label="密码">  
        <el-input v-model="UserInfo.password" type="password" placeholder="请输入新密码" />  
      </el-form-item>  
      <el-form-item>  
        <el-button type="primary" @click="updateInfo">修改</el-button>  
      </el-form-item>  
    </el-form>  
  </div>  
</template>  
  
<script setup lang="ts">  
import { ref } from 'vue';  
import axios from "@/utils/request";  
import { User } from '@/types'; 
import { set } from '@/utils/storage';  
import router from '@/router';  
import { useUserStore } from '@/store/user';  
  
const userStore = useUserStore();  
const { setUser } = userStore;  
  
const UserInfo = ref<User>({  
  "username": "",  
  "email": "",  
  "password": "",  
  "bio": '',  
  "image": ""  
});  
  
const updateInfo = async () => {  
    const res = await axios.put('/user', { user: UserInfo.value });  
    const updatedUser = res.data.user;  
    setUser(updatedUser);  
    set('user_token', updatedUser.token);  
    router.push({ name: 'home' });  
    console.log(res.data);  
};  
</script>  
  
<style scoped>  
.per {  
  margin: 0 auto;  
  display: flex;  
  flex-direction: column;   
  justify-content: center;  
  align-items: flex-start;  
  width: 40%;  
  height: 100%;  
}  
</style>